<template>
  <div class="box">
    <a-card title="添加管理员" style="width: 90%;margin-left: 5%;margin-top: 20px;">
    <template #extra><a href="#">保存</a><a href="#" style="margin-left: 20px;" @click="goback">返回</a></template>
    <a-form
    ref="formRef"
    :model="formState"
    :rules="rules"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
  >
    <a-form-item ref="roles" label="角色" name="roles">
        <a-select v-model:value="formState.roles" placeholder="请选择角色">
        <a-select-option value="shanghai">Zone one</a-select-option>
        <a-select-option value="beijing">Zone two</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item ref="loginname" label="登录名" name="loginname">
      <a-input v-model:value="formState.loginname" />
    </a-form-item>
    <a-form-item ref="pass" label="密码" name="pass">
      <a-input v-model:value="formState.pass" />
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" @click="onSubmit">保存</a-button>
      <a-button style="margin-left: 10px" @click="resetForm">返回</a-button>
    </a-form-item>
   
  </a-form>
  </a-card>
  </div>
</template>

<script lang="ts">
import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
import { Moment } from 'moment';
import { defineComponent, reactive, ref, toRaw, UnwrapRef } from 'vue';
import { useRouter } from "vue-router"
interface FormState {
    roles: '';
  loginname:'',
  pass:''
}
export default {
    setup() {
    const formRef = ref();
    const formState= reactive({
        roles: '',
        loginname:'',
        pass:''
    });
    const router=useRouter()
    const goback=()=>{
        router.push('/sys/adminlist')
    }
    const rules = {

      loginname: [
        { required: true, message: 'Please input Activity name', trigger: 'blur' },
        { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
      ],
      pass: [
        { required: true, message: 'Please input Activity name', trigger: 'blur' },
        { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
      ],
    };
    const onSubmit = () => {
      formRef.value
        .validate()
        .then(() => {
          console.log('values', formState, toRaw(formState));
        })
        .catch((error: ValidateErrorEntity<FormState>) => {
          console.log('error', error);
        });
    };
    const resetForm = () => {
        router.push('/sys/adminlist')
    };
    return {
        goback,
      formRef,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      other: '',
      formState,
      rules,
      onSubmit,
      resetForm,
    };
}
}
</script>

<style>
.box{
    width: 100%;
    height: 100%;
}
</style>